/*
 * @Description: 地图查看定制班线
 * @Author: shuaishuai.wang
 * @Date: 2019-08-23 15:56:58
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-10-30 15:25:55
 */
<template>
  <div id="map"></div>
</template>

<script>
import AMap from 'AMap'
import { getLnglat } from '../api/api'
export default {
  data() {
    return {
      direction: '',
      routeID: '',
      lgnLatList: []
    }
  },
  mounted() {
    this.direction = this.$route.params.DIRECTION
    this.routeID = this.$route.params.ROUTE_ID
    // document.querySelector('#map').style.height = document.body.clientHeight + 'px' // 地图大小为屏幕大小
    getLnglat(this.direction, this.routeID).then(res => {
      let path = []
      let markers = []
      let resTransform = JSON.parse(JSON.stringify(res))
      resTransform.LIST.forEach((item, inddex) => {
        path.push([item.ADDRESS_LNG, item.ADDRESS_LAT])

        let iconPath = ''// 定义图标
        if (inddex === 0) { // 起点
          iconPath = require('@wechat/img/origin-station.png')
        } else if (inddex === resTransform.LIST.length - 1) { // 终点
          iconPath = require('@wechat/img/destination-station.png')
        } else { // 途径站点
          iconPath = require('@wechat/img/map-point.svg')
        }
        if (item.POINT_TYPE === 1) { // 点位类型：1.站点，2.拐点
          markers.push({
            title: item.ADDRESS, // 位置名称
            icon: iconPath, // 图标
            position: [item.ADDRESS_LNG, item.ADDRESS_LAT]// 经纬度
          })
        }
      })

      let map = new AMap.Map('map', { // 创建高德map
        resizeEnable: true,
        center: path[0],
        zoom: 12
      })
      this.createPointText(map, markers)
      this.createPolyline(map, path)
    })
  },
  methods: {
    createPointText(map, markers) { // 创建站点标记以及站点名文字
      // 设置marker站点信息
      markers.forEach((item) => {
        let marker = new AMap.Marker({
          title: item.title,
          // icon: item.icon, // 图标
          icon: new AMap.Icon({
            image: item.icon,
            size: new AMap.Size(52, 52), // 图标大小
            imageSize: new AMap.Size(30, 30)
          }),
          position: [item.position[0], item.position[1]], // 经纬度
          offset: new AMap.Pixel(-15, -15),
          label: { // 设置label标签 // label默认蓝框白底左上角显示，样式className为：amap-marker-label
            content: '<div style="color: #027aff;">' + item.title + '</div>', // 自定义点标记覆盖物内容
            offset: new AMap.Pixel(-12, 15), // 设置文本标注偏移量
            direction: 'center'// 设置文本标注方位
          }
          // animation: 'AMAP_ANIMATION_DROP' // 点标记的动画效果
        })
        marker.setMap(map)
      })
    },
    createPolyline(map, path) { // 绘制班线线路折线，简单画出班线路径
      let polyline = new AMap.Polyline({
        path: path, // 设置线覆盖物路径
        showDir: true, // 是否延路径显示白色方向箭头
        strokeColor: '#027AFF', // 线颜色
        strokeOpacity: 1, // 线透明度
        strokeWeight: 5, // 线宽
        lineJoin: 'round'
      })
      map.add(polyline)
    }
  }
}
</script>

<style lang="scss" scoped>
#map {
  width: 750px;
  height: 100%;
}
.amap-marker-label {
  border: 0;
  background-color: transparent;
}
</style>
